<html>

<head>
    <title>小蜜蜂进化</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="Scripts/tipped.js"></script>
    <script src="Scripts/imagesloaded.pkgd.min.js"></script>
    <script src="Scripts/notify.min.js"></script>
    <script src="Scripts/Site.js"></script>
    <script src="Scripts/tabcontent.js"></script>
    <script src="Scripts/jquery.base64.min.js"></script>
    <script src="Scripts/jquery.simplemodal.1.4.4.min.js"></script>
    <link href="Content/Site.min.css" rel="stylesheet" />
    <link href="Content/tipped.css" rel="stylesheet" />

    <meta name="description" content="放置类网页游戏，生产更多的baby来升级吧！">
    <meta name="ROBOTS" content="INDEX, NOFOLLOW">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
    <div id="pageContent">
        <div style="float: right; padding: 3px; font-weight: bold;">
            <span style="margin-left: 15px" data-bind="text: '第 ' + gameFormatNumber(generations()) + ' 代'"></span>
            <span style="margin-left: 15px" data-bind="text: '蜜 ' + gameFormatNumber(sod()) + ' 滴'"></span>
        </div>
        <!-- <div class="title">
            Critter Mound <small>v1.1.4 - <a href="http://yoyz.com/critter/critter_mound_v1-1-4.zip">Download it here</a></small>
        </div> -->

        <div style="margin-top: 10px;"></div>
        <ul class="tabs">
            <li class="male"><a href="#tabs-hatchery" title="">皇家孵化场 (<span data-bind="text: femaleMound().length + maleMound().length"></span>/<span data-bind="text: maxFemaleMoundSize() + maxMaleMoundSize()"></span>)</a></li>
            <li class="female" data-bind="visible: isHeirsUnlocked"><a href="#tabs-heirs" title="">孵化场 (<span data-bind="text: princessMound().length + princeMound().length"></span>/<span data-bind="text: maxPrincessMoundSize() + maxPrinceMoundSize()"></span>)</a></li>
            <li class="mine"><a href="#tabs-production" title="">工人  (<span data-bind="text: '+' + gameFormatNumber(factorySodPerSecond())+ '/s'"></span>)</a></li>
            <li class="army" data-bind="css: { battle: inBattle}"><a href="#tabs-barracks" title="">士兵 (<span data-bind="text: armyMound().length"></span>/<span data-bind="text: maxArmyMoundSize()"></span>)</a></li>
            <li class="achievement"><a href="#tabs-achievements" title="">成就 (<span data-bind="text: achievementsUnlocked()"></span>/<span data-bind="text: achievements().length"></span>)</a></li>
            <li><a href="#tabs-information" title="">怎么玩</a></li>
        </ul>

        <div class="tabcontents">
            <div id="tabs-hatchery" class="tab" style="display:none">
                <table cellspacing="10">
                    <tr>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter female">
                                <thead>
                                    <tr>
                                        <th colspan="3" class="noborder tableheader">皇后</th>
                                        <th colspan="4" style="text-align: right" class="noborder">
                                            <button data-bind="text: pauseBreeding() ? '继续' : '暂停', click: $root.TogglePauseBreeding.bind($root), clickBubble: false">暂停</button>
                                            <button data-bind="text: '加速: ' + boosts() + ' / ' + maxBoosts(), click: $root.Boost.bind($root, 'Mother'), clickBubble: false, disable: boosts() < 1">加速</button>
                                            <button class="upgrade" data-bind="visible: maxFemaleMoundSize() < 9,text: '扩容需要 ' + gameFormatNumber(femaleMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'FemaleHatchery'), clickBubble: false, disable: sodRaw() < femaleMoundUpgradeCost()"></button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: mother, as: 'critter' }"></tbody>
                            </table>
                        </td>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter male">
                                <thead>
                                    <tr>
                                        <th colspan="3" class="noborder tableheader">国王</th>
                                        <th colspan="4" style="text-align: right" class="noborder">
                                            <button data-bind="text: pauseBreeding() ? '继续' : '暂停', click: $root.TogglePauseBreeding.bind($root), clickBubble: false">暂停</button>
                                            <button data-bind="text: '加速: ' + boosts() + ' / ' + maxBoosts(), click: $root.Boost.bind($root, 'Father'), clickBubble: false, disable: boosts() < 1">加速</button>
                                            <button class="upgrade" data-bind="visible: maxMaleMoundSize() < 9,text: '扩容需要 ' + gameFormatNumber(maleMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'MaleHatchery'), clickBubble: false, disable: sodRaw() < maleMoundUpgradeCost()"></button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: father, as: 'critter' }"></tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter female hatchery">
                                <thead>
                                    <tr>
                                        <th colspan="7" class="noborder tableheader">
                                            <div style="float: right">
                                                <button class="female one" data-bind="click: $root.Move.bind($root, 'Mate','Female'), clickBubble: false">皇后</button>
                                                <button class="female two" style="display: none;" data-bind="click: $root.Move.bind($root, 'MateYoung','Female'), clickBubble: false">公主</button>
                                                <button class="mine" data-bind="click: $root.Move.bind($root, 'Worker','Female'), clickBubble: false">工人</button>
                                                <button class="army" data-bind="click: $root.Move.bind($root, 'Army','Female'), clickBubble: false, disable: inBattle, css: { battle: inBattle}">士兵</button>
                                                <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Female'), clickBubble: false">牺牲</button>
                                                <select data-bind="value: femaleSort, options: sorts, event:{ change: Sort }"></select>
                                            </div>
                                            孵化场 <span data-bind="text: femaleMound().length"></span>/<span data-bind="text: maxFemaleMoundSize()"></span>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: femaleMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: femaleMoundEmpty }"></tfoot>
                            </table>
                        </td>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter male hatchery">
                                <thead>
                                    <tr>
                                        <th colspan="7" class="noborder tableheader">
                                            <div style="float: right">
                                                <button class="male one" data-bind="click: $root.Move.bind($root, 'Mate','Male'), clickBubble: false">国王</button>
                                                <button class="male two" style="display: none;" data-bind="click: $root.Move.bind($root, 'MateYoung','Male'), clickBubble: false">王子</button>
                                                <button class="mine" data-bind="click: $root.Move.bind($root, 'Worker','Male'), clickBubble: false">工人</button>
                                                <button class="army" data-bind="click: $root.Move.bind($root, 'Army','Male'), clickBubble: false, disable: inBattle, css: { battle: inBattle}">士兵</button>
                                                <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Male'), clickBubble: false">牺牲</button>
                                                <select data-bind="value: maleSort, options: sorts, event:{ change: Sort }"></select>
                                            </div>
                                            孵化场 <span data-bind="text: maleMound().length"></span>/<span data-bind="text: maxMaleMoundSize()"></span>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: maleMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: maleMoundEmpty }"></tfoot>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="tabs-heirs" class="tab" style="display:none">
                <table cellspacing="10">
                    <tr>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter female">
                                <thead>
                                    <tr>
                                        <th colspan="3" class="noborder tableheader">Princess (<span data-bind="text: gameFormatNumber(Math.round((princess().score * 5) - ((princess().currentHealth() / princess().health) * (princess().score * 5))))"></span> sod needed)</th>
                                        <th colspan="4" style="text-align: right" class="noborder">
                                            <button class="upgrade" data-bind="visible: maxPrincessMoundSize() < 9,text: '扩容需要 ' + gameFormatNumber(princessMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'PrincessHatchery'), clickBubble: false, disable: sodRaw() < princessMoundUpgradeCost()"></button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: princess, as: 'critter' }"></tbody>
                            </table>
                        </td>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter male">
                                <thead>
                                    <tr>
                                        <th colspan="3" class="noborder tableheader">Prince (<span data-bind="text: gameFormatNumber(Math.round((prince().score * 5) - ((prince().currentHealth() / prince().health) * (prince().score * 5))))"></span> sod needed)</th>
                                        <th colspan="4" style="text-align: right" class="noborder">
                                            <button class="upgrade" data-bind="visible: maxPrinceMoundSize() < 9,text: '扩容需要 ' + gameFormatNumber(princeMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'PrinceHatchery'), clickBubble: false, disable: sodRaw() < princeMoundUpgradeCost()"></button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: prince, as: 'critter' }"></tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4>供给给新婚王子公主的蜜的百分比: <span data-bind="text: sodDedicatedToBreeding, css: { higher: sodDedicatedToBreeding() > 0 && sodDedicatedToBreeding() <= 100,lower: sodDedicatedToBreeding() > 100 }"></span>% (<span data-bind="text: gameFormatNumber(sodPerSecondForBreeding)"></span>/s)</h4>
                        </td>
                        <td>
                            <input style="width: 100%" type="range" min="0" max="150" step="5" data-bind="value: sodDedicatedToBreeding">
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter female hatchery">
                                <thead>
                                    <tr>
                                        <th colspan="7" class="noborder tableheader">
                                            <div style="float: right">
                                                <button class="female two" style="display: none;" data-bind="click: $root.Move.bind($root, 'Mate','Princess'), clickBubble: false">皇后</button>
                                                <button class="female one" data-bind="click: $root.Move.bind($root, 'MateYoung','Princess'), clickBubble: false">公主</button>
                                                <button class="mine" data-bind="click: $root.Move.bind($root, 'Worker','Princess'), clickBubble: false">工人</button>
                                                <button class="army" data-bind="click: $root.Move.bind($root, 'Army','Princess'), clickBubble: false, disable: inBattle, css: { battle: inBattle}">士兵</button>
                                                <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Princess'), clickBubble: false">牺牲</button>
                                                <select data-bind="value: princessSort, options: sorts, event:{ change: Sort }"></select>
                                            </div>
                                            孵化场 <span data-bind="text: princessMound().length"></span>/<span data-bind="text: maxPrincessMoundSize()"></span>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: princessMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: princessMoundEmpty }"></tfoot>
                            </table>
                        </td>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter male hatchery">
                                <thead>
                                    <tr>
                                        <th colspan="7" class="noborder tableheader">
                                            <div style="float: right">
                                                <button class="male two" style="display: none;" data-bind="click: $root.Move.bind($root, 'Mate','Prince'), clickBubble: false">国王</button>
                                                <button class="male one" data-bind="click: $root.Move.bind($root, 'MateYoung','Prince'), clickBubble: false">王子</button>
                                                <button class="mine" data-bind="click: $root.Move.bind($root, 'Worker','Prince'), clickBubble: false">工人</button>
                                                <button class="army" data-bind="click: $root.Move.bind($root, 'Army','Prince'), clickBubble: false, disable: inBattle, css: { battle: inBattle}">士兵</button>
                                                <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Prince'), clickBubble: false">牺牲</button>
                                                <select data-bind="value: princeSort, options: sorts, event:{ change: Sort }"></select>
                                            </div>
                                            孵化场 <span data-bind="text: princeMound().length"></span>/<span data-bind="text: maxPrinceMoundSize()"></span>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'critterRow', foreach: princeMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: princeMoundEmpty }"></tfoot>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="tabs-production" class="tab" style="display:none">
                <table cellspacing="10">
                    <tr>
                        <td colspan="2" style="vertical-align: top;">
                            <table class="production" style="width: 1050px; margin: 0 auto;">
                                <thead>
                                    <tr>
                                        <th class="noborder" colspan="7">
                                            <img src="Content/images/Production.png" alt="" style="width: 986px" />
                                        </th>
                                    </tr>
                                    <tr class="header">
                                        <th style="width: 150px; text-align: center">采集泥土</th>
                                        <th style="width: 150px; text-align: center">运输泥土</th>
                                        <th style="width: 150px; text-align: center">加工泥土</th>
                                        <th style="width: 150px; text-align: center">产生蜜</th>
                                        <th style="width: 150px; text-align: center">加工青草</th>
                                        <th style="width: 150px; text-align: center">运输青草</th>
                                        <th style="width: 150px; text-align: center">采集青草</th>
                                    </tr>
                                    <tr class="stats">
                                        <th>
                                            <span data-bind="text: gameFormatNumber(dirt()), css: { lower: dirt() <= 0 }"></span>
                                            <span style="white-space: nowrap; font-size: 0.85em" data-bind="text: mineDirtPerSecond() >= 0 ? ' + ' + gameFormatNumber(mineDirtPerSecond()) + ' /s': ' - ' + gameFormatNumber(Math.abs(mineDirtPerSecond())) + ' /s', css: { higher: mineDirtPerSecond() > 0, lower: mineDirtPerSecond() <= 0}"></span>
                                        </th>
                                        <th>
                                            <span data-bind="text: gameFormatNumber(carryMineDirtPerSecond())+ ' /s', css: { higher: carryMineDirtPerSecond() >= 0 && carryPerSecond() >= mineDirtPerSecond(), lower: carryMineDirtPerSecond() == 0 || carryMineDirtPerSecond() < carryPerSecond() }"></span>

                                        </th>
                                        <th>
                                            <span data-bind="text: gameFormatNumber(factoryDirt())"></span>
                                            <span style="white-space: nowrap; font-size: 0.85em" data-bind="text: factoryDirtPerSecond() >= 0 ? ' + ' + gameFormatNumber(factoryDirtPerSecond())+ ' /s' : ' - ' + gameFormatNumber(Math.abs(factoryDirtPerSecond()))+ ' /s', css: { higher: factoryDirtPerSecond() > 0, lower: factoryDirtPerSecond() <= 0}"></span>
                                        </th>
                                        <th>
                                            <span data-bind="text: gameFormatNumber(sod())"></span>
                                            <span style="white-space: nowrap; font-size: 0.85em" data-bind="text: ' + ' + gameFormatNumber(factorySodPerSecond())+ ' /s', css: { higher: factorySodPerSecond() > 0, lower: factorySodPerSecond() <= 0}"></span>

                                        </th>
                                        <th>
                                            <span data-bind="text: gameFormatNumber(factoryGrass()), css: { lower: factoryGrass() <= 0 }"></span>
                                            <span style="white-space: nowrap; font-size: 0.85em" data-bind="text: factoryGrassPerSecond() >= 0 ? ' + ' + gameFormatNumber(factoryGrassPerSecond())+ ' /s' : ' - ' + gameFormatNumber(Math.abs(factoryGrassPerSecond()))+ ' /s', css: { higher: factoryGrassPerSecond() > 0, lower: factoryGrassPerSecond() <= 0}"></span>
                                        </th>
                                        <th>
                                            <span data-bind="text: gameFormatNumber(carryFarmGrassPerSecond())+ ' /s', css: { higher: carryFarmGrassPerSecond() >= carryPerSecond(), lower: carryFarmGrassPerSecond() == 0 || carryFarmGrassPerSecond() < carryPerSecond() }"></span>
                                        </th>
                                        <th>
                                            <span data-bind="text: gameFormatNumber(grass()), css: { lower: grass() <= 0 }"></span>
                                            <span style="white-space: nowrap; font-size: 0.85em" data-bind="text: farmGrassPerSecond() >= 0 ? ' + ' + gameFormatNumber(farmGrassPerSecond())+ ' /s' : ' - ' + gameFormatNumber(Math.abs(farmGrassPerSecond()))+ ' /s', css: { higher: farmGrassPerSecond() > 0, lower: farmGrassPerSecond() <= 0}"></span>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter mine">
                                <thead>
                                    <tr>
                                        <th colspan="4" class="noborder tableheader">泥土矿 <span data-bind="text: mineMound().length"></span>/<span data-bind="text: maxMineMoundSize()"></span> (<span data-bind="text: gameFormatNumber(dirtPerSecond())"></span> 泥土每秒)</th>
                                        <th colspan="3" style="text-align: right" class="noborder">
                                            <button class="upgrade" data-bind="visible: maxMineMoundSize() < 9, text: '升级需要 ' + gameFormatNumber(mineMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'Mine'), clickBubble: false, disable: sodRaw() < mineMoundUpgradeCost()">upgrade</button>
                                            <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Mine'), clickBubble: false">牺牲</button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'workerHeader' } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'workerRow', foreach: mineMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: mineMoundEmpty }"></tfoot>
                            </table>
                        </td>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter farm">
                                <thead>
                                    <tr>
                                        <th colspan="4" class="noborder tableheader">青草场 <span data-bind="text: farmMound().length"></span>/<span data-bind="text: maxFarmMoundSize()"></span> (<span data-bind="text: gameFormatNumber(grassPerSecond())"></span> 青草每秒)</th>
                                        <th colspan="3" style="text-align: right" class="noborder">
                                            <button class="upgrade" data-bind="visible: maxFarmMoundSize() < 9, text: '升级需要 ' + gameFormatNumber(farmMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'Farm'), clickBubble: false, disable: sodRaw() < farmMoundUpgradeCost()">upgrade</button>
                                            <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Farm'), clickBubble: false">牺牲</button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'workerHeader' } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'workerRow', foreach: farmMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: farmMoundEmpty }"></tfoot>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter carrier">
                                <thead>
                                    <tr>
                                        <th colspan="4" class="noborder tableheader">运输队 <span data-bind="text: carrierMound().length"></span>/<span data-bind="text: maxCarrierMoundSize()"></span> (<span data-bind="text: gameFormatNumber(carryPerSecond())"></span> 运输每秒)</th>
                                        <th colspan="3" style="text-align: right" class="noborder">
                                            <button class="upgrade" data-bind="visible: maxCarrierMoundSize() < 9, text: '升级需要 ' + gameFormatNumber(carrierMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'Carrier'), clickBubble: false, disable: sodRaw() < carrierMoundUpgradeCost()">upgrade</button>
                                            <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Carrier'), clickBubble: false">牺牲</button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'workerHeader' } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'workerRow', foreach: carrierMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: carrierMoundEmpty }"></tfoot>
                            </table>
                        </td>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter factory">
                                <thead>
                                    <tr>
                                        <th colspan="4" class="noborder tableheader">加工厂 <span data-bind="text: factoryMound().length"></span>/<span data-bind="text: maxFactoryMoundSize()"></span> (<span data-bind="text: gameFormatNumber(sodPerSecond())"></span> 蜜每秒)</th>
                                        <th colspan="3" style="text-align: right" class="noborder">
                                            <button class="upgrade" data-bind="visible: maxFactoryMoundSize() < 9, text: '升级需要 ' + gameFormatNumber(factoryMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'Factory'), clickBubble: false, disable: sodRaw() < factoryMoundUpgradeCost()">upgrade</button>
                                            <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Factory'), clickBubble: false">牺牲</button>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'workerHeader' } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'workerRow', foreach: factoryMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: factoryMoundEmpty }"></tfoot>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="tabs-barracks" class="tab" style="display:none">
                <table cellspacing="10">
                    <tr data-bind="visible: atWar">
                        <td>
                            <div style="float: right">
                                <button data-bind="text: pauseAutoBattle() ? '继续' : '暂停', click: $root.TogglePauseAutoBattle.bind($root), clickBubble: false">暂停</button>
                            </div>
                            <h4 data-bind="text: inBattle() ? '我们遭遇了敌人！' : !armyUpgrades().hasGeneral() ? '我们需要一个将军来打败敌人' : map().tilesCleared() < map().tileCount() ? '让我想想应该攻击哪个目标？' : '我们是胜利者！战争结束了。'"></h4>

                            <div class="progressbarborder">
                                <div class="progressbar enemy" data-bind="style: { width: autoBattleClockPercentage }">&nbsp;</div>
                            </div>
                        </td>
                        <td>
                            <div style="float: right">
                                <button data-bind="text: pauseExplore() ? '继续' : '暂停', click: $root.TogglePauseExplore.bind($root), clickBubble: false">暂停</button>
                            </div>
                            <h4 data-bind="text: inBattle() ? '放下你的望远镜开始战斗吧！' : !armyUpgrades().hasScout() ? '我们需要一个侦察兵来探索地图' : map().canExplore() ? '正在侦查附近的敌人' : '已经侦查完毕所有区域'"></h4>

                            <div class="progressbarborder">
                                <div class="progressbar army" data-bind="style: { width: exploreClockPercentage }">&nbsp;</div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 50%">
                            <table class="critter army">
                                <thead>
                                    <tr>
                                        <th colspan="3" class="noborder tableheader">军队 <span data-bind="text: armyMound().length"></span>/<span data-bind="text: maxArmyMoundSize()"></span></th>
                                        <th colspan="4" style="text-align: right; color: black" class="noborder">
                                            <button class="upgrade" data-bind="visible: maxArmyMoundSize() < 9, text: '升级需要 ' + gameFormatNumber(armyMoundUpgradeCost()) + ' 蜂蜜', click: $root.Upgrade.bind($root, 'Army'), clickBubble: false, disable: sodRaw() < armyMoundUpgradeCost()">upgrade</button>
                                            <button class="recycle" data-bind="click: $root.Move.bind($root,'Recycle', 'Army'), clickBubble: false, disable: $root.inBattle">牺牲</button>
                                            <select data-bind="value: armySort, options: armySorts, event:{ change: Sort }"></select>
                                        </th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'soldierRow', foreach: armyMound, as: 'critter' }"></tbody>
                                <tfoot data-bind="template: { name: 'critterRowEmpty', foreach: armyMoundEmpty }"></tfoot>
                            </table>
                            <div style="margin-top: 10px; font-weight: bold;" data-bind="visible: atWar">
                                <div data-bind="visible: armyMound().length > 0">
                                    每位士兵每级可以获得 <span class="higher">1% 暴击概率加成</span>.
                                </div>
                                <div data-bind="visible: armyUpgrades().hasGeneral()">
                                    你的士兵此时获得 <span class="higher" data-bind="text: armyUpgrades().generalBonus() + '% 狩猎加成'"></span> 来自你的 <span class="higher">将军</span>.
                                </div>
                                <div data-bind="visible: nation().isDefeated()">
                                    你的士兵此时获得 <span class="higher">100% 狩猎加成</span> 由于你 <span class="higher">控制了敌人的孵化场</span>.
                                </div>
                                <div data-bind="visible: nation().fortFound()">
                                    你的士兵此时获得 <span class="higher">50% 狩猎加成</span> 来自 <span class="higher">一个废弃的堡垒</span>.
                                </div>
                                <div data-bind="visible: armyUpgrades().hasScout()">
                                    你的士兵此时获得 <span class="higher" data-bind="text: armyUpgrades().scoutBonus() + '% 探索加成' "></span> 来自你的 <span class="higher">侦察兵</span>.
                                </div>
                                <div data-bind="visible: nation().isDefeated()">
                                    你的士兵此时获得 <span class="higher">100% 探索加成</span> 由于你 <span class="higher">控制了敌人的孵化场</span>.
                                </div>
                                <div data-bind="visible: nation().exploreFound()">
                                    你的士兵此时获得 <span class="higher">50% 探索加成</span> 来自 <span class="higher">高地</span>.
                                </div>
                                <div data-bind="visible: armyUpgrades().hasMedic()">
                                    你的士兵此时获得 <span class="higher" data-bind="text: armyUpgrades().medicBonus() + '% 治疗加成'"></span> 来自你的 <span class="higher">医务兵</span>.
                                </div>
                                <div data-bind="visible: armyUpgrades().strengthBonus() > 0">
                                    你的士兵此时获得 <span class="higher" data-bind="text: armyUpgrades().strengthBonus() + '% 力量加成'"></span> 由于战斗中获得的 <span class="higher">远古神器</span>.
                                </div>
                                <div data-bind="visible: armyUpgrades().agilityBonus() > 0">
                                    你的士兵此时获得 <span class="higher" data-bind="text: armyUpgrades().agilityBonus() + '% 敏捷加成'"></span> 由于战斗中获得的 <span class="higher">远古神器</span>.
                                </div>
                                <div data-bind="visible: armyUpgrades().biteBonus() > 0">
                                    你的士兵此时获得 <span class="higher" data-bind="text: armyUpgrades().biteBonus() + '% 草属性加成'"></span> 由于战斗中获得的 <span class="higher">远古神器</span>.
                                </div>
                                <div data-bind="visible: armyUpgrades().stingBonus() > 0">
                                    你的士兵此时获得 <span class="higher" data-bind="text: armyUpgrades().stingBonus() + '% 土属性加成'"></span> 由于战斗中获得的 <span class="higher">远古神器</span>.
                                </div>
                            </div>
                            <div style="margin-top: 10px; font-weight: bold;" data-bind="visible: !inBattle() && map().enemyArmyMound().length > 0">
                                <div class="higher trait" data-bind="if: map().battleReport.won()">
                                     <span data-bind="text: map().battleReport.enemy"></span> 被消灭了！
                                </div>

                                <div class="lower trait" data-bind="if: !map().battleReport.won()">
                                     <span data-bind="text: map().battleReport.enemy"></span> 打败了我们的军队！  已经没有生还者了！
                                </div>
                            </div>
                        </td>
                        <td style="vertical-align: top; width: 50%">
                            <table data-bind="visible: inBattle()" class="critter enemyarmy" style="margin-top: 3px;">
                                <thead>
                                    <tr>
                                        <th colspan="8" class="noborder tableheader"><span data-bind="text: map().battleReport.enemy"></span></th>
                                    </tr>
                                    <!-- ko template: { name: 'critterHeader', data: mother } -->
                                    <!-- /ko -->
                                </thead>
                                <tbody data-bind="template: { name: 'soldierRow', foreach: map().enemyArmyMound, as: 'critter' }"></tbody>
                            </table>
                            <div data-bind="visible: !inBattle() && !showTreasure()">
                                <table data-bind="visible: atWar()" class="map" style="margin-top:4px;">
                                    <thead>
                                        <tr>
                                            <th colspan="15" class="noborder tableheader">
                                                地图当前进度 <span data-bind="text: map().completePercentage() + ' finished'"></span>
                                                <!-- ko if: nation() != undefined -->
                                                <img title="Enemy Mound" data-bind="attr: { src: nation().isDefeated() ? 'Content/icons/star.png' : 'Content/icons/staroff.png'}" />
                                                <img title="100% Explored" data-bind="attr: { src: nation().mapComplete() ? 'Content/icons/complete.png' : 'Content/icons/completeoff.png'}" />
                                                <img title="Mine" data-bind="attr: { src: nation().mineFound() ? 'Content/icons/mine.png' : 'Content/icons/mineoff.png'}" />
                                                <img title="Farm" data-bind="attr: { src: nation().farmFound() ? 'Content/icons/farm.png' : 'Content/icons/farmoff.png'}" />
                                                <img title="Equipment" data-bind="attr: { src: nation().carryFound() ? 'Content/icons/carry.png' : 'Content/icons/carryoff.png'}" />
                                                <img title="Factory" data-bind="attr: { src: nation().factoryFound() ? 'Content/icons/factory.png' : 'Content/icons/factoryoff.png'}" />
                                                <img title="Boost" data-bind="attr: { src: nation().boostFound() ? 'Content/icons/heart.png' : 'Content/icons/heartoff.png'}" />
                                                <img title="Gene" data-bind="attr: { src: nation().geneFound() ? 'Content/icons/bug.png' : 'Content/icons/bugoff.png'}" />
                                                <img title="Fort" data-bind="attr: { src: nation().fortFound() ? 'Content/icons/fort.png' : 'Content/icons/fortoff.png'}" />
                                                <img title="High Ground" data-bind="attr: { src: nation().exploreFound() ? 'Content/icons/zoom.png' : 'Content/icons/zoomoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: nation().treasuresFound() > 0 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: nation().treasuresFound() > 1 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: nation().treasuresFound() > 2 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: nation().treasuresFound() > 3 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                                <!-- /ko -->
                                            </th>
                                            <th colspan="10" class="noborder" style="text-align: right;">
                                                <button data-bind="click: $root.EndWar.bind($root), clickBubble: false">结束战斗</button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: map().tiles()">
                                        <tr data-bind="foreach: $data">
                                            <td data-bind="text: danger() > 0 && extraClass() == '' ? danger() : '', class: isCleared() ? 'clear' + danger() + ' ' + extraClass() : 'fog' + ' ' + extraClass(), css: { unlocked: isUnlocked() && !isCleared()}"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div data-bind="visible: !atWar()" style="margin-top:16px; text-align: center">
                                    <div data-bind="foreach: nations">
                                        <button class="war" data-bind="click: $root.StartWar.bind($root), enable: isUnlocked, css: {unlocked: isUnlocked}">
                                            <div data-bind="text: name"></div>
                                            <div class="info" data-bind="text: desc"></div>
                                            <div class="info" data-bind="text: 'score ' + lowBaseValue + ' to ' + highBaseValue"></div>
                                            <div style="margin-top: 5px">
                                                <img title="Enemy Mound" data-bind="attr: { src: isDefeated() ? 'Content/icons/star.png' : 'Content/icons/staroff.png'}" />
                                                <img title="100% Explored" data-bind="attr: { src: mapComplete() ? 'Content/icons/complete.png' : 'Content/icons/completeoff.png'}" />
                                                <img title="Mine" data-bind="attr: { src: mineFound() ? 'Content/icons/mine.png' : 'Content/icons/mineoff.png'}" />
                                                <img title="Farm" data-bind="attr: { src: farmFound() ? 'Content/icons/farm.png' : 'Content/icons/farmoff.png'}" />
                                                <img title="Equipment" data-bind="attr: { src: carryFound() ? 'Content/icons/carry.png' : 'Content/icons/carryoff.png'}" />
                                                <img title="Factory" data-bind="attr: { src: factoryFound() ? 'Content/icons/factory.png' : 'Content/icons/factoryoff.png'}" />
                                                <img title="Boost" data-bind="attr: { src: boostFound() ? 'Content/icons/heart.png' : 'Content/icons/heartoff.png'}" /><br />
                                                <img title="Gene" data-bind="attr: { src: geneFound() ? 'Content/icons/bug.png' : 'Content/icons/bugoff.png'}" />
                                                <img title="Fort" data-bind="attr: { src: fortFound() ? 'Content/icons/fort.png' : 'Content/icons/fortoff.png'}" />
                                                <img title="High Ground" data-bind="attr: { src: exploreFound() ? 'Content/icons/zoom.png' : 'Content/icons/zoomoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: treasuresFound() > 0 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: treasuresFound() > 1 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: treasuresFound() > 2 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                                <img title="Artifact" data-bind="attr: { src: treasuresFound() > 3 ? 'Content/icons/treasure.png' : 'Content/icons/treasureoff.png'}" />
                                            </div>

                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div data-bind="visible: !inBattle() && showTreasure()" style="margin-top: 50px; padding: 20px; text-align: center!important; display: block;">
                                <h1 data-bind="text: treasureTitle"></h1>
                                <h3 data-bind="text: treasureText"></h3>
                                <button class="war unlocked" style="margin-top: 20px;" data-bind="click: $root.AcknowledgeTreasure.bind($root)">返回战斗</button>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="tabs-achievements" class="tab" style="display:none">
                <table cellspacing="10">
                    <tr>
                        <td style="width: 50%; padding: 5px; vertical-align: top;text-align: center;">
                            <h4>成就</h4>
                            <div data-bind="foreach: achievements">
                                <div class="achievement" data-bind="css: { unlocked: isUnlocked}">
                                    <div class="name" data-bind="text: name"></div>
                                    <div class="desc" data-bind="text: desc"></div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="tabs-information" class="tab" style="display:none">
                <table cellspacing="10">
                    <tr>
                        <td style="width: 50%; padding: 5px; vertical-align: top;">
                            <h4>怎么玩</h4>

                            <!-- <p>
                                <strong>Questions & Discussion at <a href="http://www.reddit.com/r/crittermound">www.reddit.com/r/crittermound</a></strong><br />
                            </p> -->
                            <p>
                                <strong>进化论</strong><br />
                                <ol>
                                    <li>物种是可变的，生物是进化的。</li>
                                    <li>自然选择时生物进化的动力。</li>
                                </ol>
                            </p>

                            <p>
                                <strong>新手指南</strong><br />
                                <ol>
                                    <li>孵化场中产生新的后代</li>
                                    <li>如果他们大部分是绿色，那么将其作为国王或皇后</li>
                                    <li>将红色的后代变成工人</li>
                                    <li>将其它的后代变成士兵</li>
                                    <li>开始一场战斗吧！</li>
                                    <li>重复1和2操作，直到你足够强大赢得最终的胜利</li>
                                </ol>
                            </p>

                            <p>
                                <strong>孵化场</strong><br />
                                孵化场是国王和皇后产生后代的地方，后代可以成为国王或皇后，矿工，或者士兵。
                                一旦授予后代一个角色，那么将不能再被改变。替换不同属性的工人，可以提升建筑的生产效率，但不会改变建筑的类型。
                                当孵化场没有空余的位置时，综合属性差的后代会被挤出孵化场，加速操作会立刻产生一个后代，但会消耗你一个加速值，加速值会随着时间增加。
                            </p>

                            <p>
                                <strong>属性和基因突变</strong><br />
                                每次孵化属性都会变化，一般情况下，属性的某个指标变化范围在其父母的范围之内：如果母亲是10，父亲是15，那么后代将介于9和16之间。变动随着属性的增加而增大。
                                一些后代会随机产生变异，变异可以额外提升某项属性值，变异同样可以遗传。你还可以通过发动战争掠夺新的基因突变。
                            </p>
                            <p>
                                <strong>生命</strong><br />
                                生命控制健康，以及决定工人加工生产蜜的效率。
                            </p>
                            <p>
                                <strong>力量</strong><br />
                                作为士兵时，在战斗中力量值的50%会附加在草属性上；作为工人时，决定了携带物品的重量。
                            </p>
                            <p>
                                <strong>敏捷</strong><br />
                                敏捷决定了繁殖、工作和战斗顺序的速度。同时作为士兵时，在战斗中敏捷值的50%会附加在土属性上。
                            </p>
                            <p>
                                <strong>草属性</strong><br />
                                草属性既是一个攻击属性也是一个防御属性，同时决定了获取“青草”的速度。
                            </p>
                            <p>
                                <strong>土属性</strong><br />
                                土属性既是一个攻击属性也是一个防御属性，同时决定了获取“泥土”的速度。
                            </p>
                            <p>
                                <strong>草和土属性</strong><br />
                                这两个属性彼此相对，他们都是攻击，并且他们都是防御。当两个士兵战斗时，会随机选取其中一个属性作为攻击属性，另一个将作为防御属性。草克土、土压草。
                            </p>
                            <p>
                                <strong>统计</strong><br />
                                统计是使用单个属性值进行的计算，游戏中，它们决定一切。比如：血量＝15 * 生命。
                            </p>

                            <strong>突变公式</strong><br />
                            <table class="critter">
                                <tr>
                                    <th style="width: 25%">父母</th>
                                    <th style="width: 25%">没有</th>
                                    <th style="width: 25%">隐性</th>
                                    <th style="width: 25%">显性</th>
                                </tr>
                                <tr><td>没有 / 没有</td><td>99%</td><td>1%</td><td>0%</td></tr>
                                <tr><td>没有 / 隐性</td><td>50%</td><td>50%</td><td>0%</td></tr>
                                <tr><td>没有 / 显性</td><td>0%</td><td>100%</td><td>0%</td></tr>
                                <tr><td>隐性 / 隐性</td><td>25%</td><td>50%</td><td>25%</td></tr>
                                <tr><td>隐性 / 显性</td><td>0%</td><td>50%</td><td>50%</td></tr>
                                <tr><td>显性 / 显性</td><td>0%</td><td>0%</td><td>100%</td></tr>
                            </table>

                            <p>
                                <strong>工人</strong><br />
                                当一个后代被指派作为一个工人，他(她)会被分派至最需要他，并且提升效率的地方。如果“泥土”产出此时最需要人，此工人优先被分配过去生产“泥土”，如果他并不能提升“泥土”的产出速度，那么他会去到另外能够提升效率的地方，如果都没有地方收留他，他会被动的被牺牲掉。
                                比如工人力量100，以及20秒的速度，那么你可以每20秒运送100单位“泥土”。
                            </p>

                            <p>
                                <strong>军营</strong><br />
                                军队驻扎在军营中。当发动战斗的时候，他们捍卫自己的领土，并且搜索周边区域的敌人，打败他们并获得领土。你可以随时离开一场战斗，但是你的地图进度会丢失，因为远古的地图制作者...(编不下去了)只是要存的话会有太多数据要存储了。因此，结束一场战斗意味着你将不得不从头开始这张地图。
                            </p>
                            <p>
                                <strong>士兵等级</strong><br />
                                三个等级最高的士兵有特殊加成。他们会被授予军衔，依此分别为：将军、侦察兵和医务兵。当某个士兵战死，或者出现了一个较高等级的士兵，那么会根据等级重新授予军衔。
                                其余的没有军衔的士兵仍旧可以获得经验，并参与等级排名。所有的士兵均可以获得暴击概率加成，概率等于士兵的等级（Level 10 = 10% 概率）。
                            </p>

                            <p data-bind="visible: isHeirsUnlocked">
                                <strong>附属孵化场</strong><br />
                                你变的超级有钱，你开辟了一个新的孵化场。但是他们需要蜜来产生后代。（蜜的数量＝分数）
                                你可以使用 <strong>shift 键</strong> 在皇家孵化场和附属孵化场中间切换。
                            </p>

                            <p><strong>shift 键会改变一些按钮的功能，并且它也可以锁定某个后代，防止他被淘汰。</strong></p>
                        </td>
                        <td style="width: 50%; padding: 5px; vertical-align: top;">
                            <button onclick="Reset()">重置游戏 / 删除存档</button>
                            <br /><br />
                            <button data-bind="click: $root.Save.bind($root), clickBubble: false">保存游戏</button> |
                            <button onclick="Export()">导出存档</button>
                            <button onclick="ShowImport()">导入存档</button>
                            <br /><br />
                            <b>战斗速度:</b> <span data-bind="text: battleTurnLength() / 20"></span> 秒<br />
                            <input style="width: 100%" type="range" min="2" max="60" data-bind="value: battleTurnLength">
                            <br /><br />
                            <h4>Release Notes</h4>
                            <p>
                                <strong>1.1.4 - Sep 9th, 2014</strong><br />
                                <ul>
                                    <li>Fixed Heir Mound cost</li>
                                    <li>Forts show up on map always</li>
                                    <li>Soldiers can level up to 25</li>
                                    <li>Bug Fixes</li>
                                </ul>
                                <strong>1.1.3 - Sep 7th, 2014</strong><br />
                                <ul>
                                    <li>Defeating the enemy mound provides a bonus to hunting and exploring</li>
                                    <li>Added base and bonus filters (total base or total bonus % across all traits)</li>
                                    <li>Bug Fixes</li>
                                </ul>
                                <strong>1.1.2 - Sep 6th, 2014</strong><br />
                                <ul>
                                    <li>Locked maxed out traits and mutations, they won't lose value after reaching highest possible point</li>
                                    <li>Sort order of the army determines promotions, not level.</li>
                                    <li>Bug Fixes</li>
                                </ul>
                                <strong>1.1.1 - Sep 5th, 2014</strong><br />
                                <ul>
                                    <li>New Score Function</li>
                                    <li>Bug Fixes</li>
                                </ul>
                                <strong>1.1 - Sep 4th, 2014</strong><br />
                                <ul>
                                    <li>Army ranks and jobs.</li>
                                    <li>Added Forts</li>
                                    <li>Fixed bug that let idle players gain multiple mutations</li>
                                    <li>Added Export / Import</li>
                                </ul>
                                <strong>1.0 - Aug 30th, 2014</strong><br />
                                <ul>
                                    <li>Production completely overhauled</li>
                                    <li>Added requirements to obtain new mutations.   They'll need to be improved to become eligible to mutate again.  So you can't just ignore existing mutations and get more.</li>
                                    <li>Shift key allows "all" commands for the mounds such as "Recycle All"</li>
                                    <li>Changed some multipliers on enemy types.  Again, it'll be harder.</li>
                                    <li>Speed changes related to Vitality have changed.  It'll increase faster at lower levels.</li>
                                </ul>
                                <strong>0.4 - Aug 23th, 2014</strong><br />
                                <ul>
                                    <li>Fixed Wars.  They now save and unlock properly, so you can find everything.   New item type increases max boosts.</li>
                                    <li>Critters can die in battle if their health reaches zero</li>
                                    <li>The enemy no longer attacks you.  Your army when not fighting, sends a scout to unlocked tiles to take a look.</li>
                                    <li>Shift click locks a critter so it won't sort out of the hatchery</li>
                                </ul>
                                <strong>0.3 - Aug 19th, 2014</strong><br />
                                <ul>
                                    <li>Added Wars.  While at war, but enemy still attacks, but never with an ememy stronger than you haven't already defeated.  There are now new genes, mines, and artifacts to discover.</li>
                                    <li>Added Achievements</li>
                                </ul>
                                <strong>0.2 - Aug 12th, 2014</strong><br />
                                <ul>
                                    <li>Got the barracks working although it may need to be balanced. Enemy strength is based off your current generation number, so the battles can be easy or hard.</li>
                                    <li>Move commands now are group selectable, and the army can be killed to provide fine tuned replacement</li>
                                    <li>Added click to boost buttons on the timers</li>
                                </ul>

                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <h4 style="margin-top: 25px; text-align: center!important">按住 <img src="Content/icons/shiftkey.gif" style="vertical-align: text-bottom" title="Shift 键" /> 去查看更多选项</h4>

    </div>

    <script id="critterHeader" type="text/html">
        <tr>
            <th style="width: 40px;">
            </th>
            <th class="traitcell">分数</th>
            <!-- ko foreach: traits -->
            <th class="traitcell" data-bind="text: name, attr: {title: name}"></th>
            <!-- /ko -->
        </tr>
    </script>

    <script id="workerHeader" type="text/html">
        <tr>
            <th style="width: 40px;">
            </th>
            <th class="traitcell">分数</th>
            <th class="traitcell">工业值</th>
            <th class="traitcell">运输力</th>
            <th class="traitcell">速度</th>
            <th class="traitcell">采草力</th>
            <th class="traitcell">挖土力</th>
        </tr>
    </script>

    <script id="critterRowEmpty" type="text/html">
        <tr class="health dead">
            <td class="health noborder" colspan="8">
                <div>&nbsp;</div>
            </td>
        </tr>
        <tr class="critterRow dead">
            <td style="width: 40px;">&nbsp;</td>
            <td class="traitcell">&nbsp;</td>
            <td class="traitcell">&nbsp;</td>
            <td class="traitcell">&nbsp;</td>
            <td class="traitcell">&nbsp;</td>
            <td class="traitcell">&nbsp;</td>
            <td class="traitcell">&nbsp;</td>
        </tr>
    </script>

    <script id="scoreTip" type="text/html">
        <div style="display:none;" data-bind="attr: {'id': 'critter_tip_' + critter.id + '_score' }">
            <table class="critter" style="width: 200px;">
                <thead>
                    <tr>
                        <th colspan="3" class="noborder">信息</th>
                    </tr>
                    <tr>
                        <th>状态</th>
                        <th>值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>一代</td>
                        <td data-bind="text: generation"></td>
                    </tr>
                    <tr>
                        <td>出生顺序</td>
                        <td data-bind="text: id"></td>
                    </tr>
                    <tr data-bind="visible: job === 3">
                        <td>经验</td>
                        <td data-bind="text: experience"></td>
                    </tr>
                </tbody>
            </table>
            <table class="critter" style="width: 200px;margin-top: 10px">
                <thead>
                    <tr>
                        <th colspan="3" class="noborder">指标</th>
                    </tr>
                    <tr>
                        <th>分数</th>
                        <th>值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>分数总计</td>
                        <td data-bind="text: gameFormatNumber(score)"></td>
                    </tr>
                    <tr>
                        <td>基础总计</td>
                        <td data-bind="text: gameFormatNumber(baseScore)"></td>
                    </tr>
                    <tr>
                        <td>加成总计</td>
                        <td data-bind="text: gameFormatNumber(bonusScore)"></td>
                    </tr>
                    <tr>
                        <td>突变</td>
                        <td data-bind="text: totalMutations"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </script>

    <script id="traitTip" type="text/html">
        <div style="display:none;" data-bind="attr: {'id': 'critter_tip_' + critter.id + '_' + name }">
            <table class="critter" style="width: 200px;">
                <thead>
                    <tr>
                        <th colspan="3" class="noborder" data-bind="text: name"></th>
                    </tr>
                    <tr>
                        <th>基础</th>
                        <th>加成</th>
                        <th>值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-bind="text: gameFormatNumber(base)"></td>
                        <td data-bind="text:  bonus >= 0 ? ' + ' + bonus + '%' : ' - ' + Math.abs(bonus) + '%'"></td>
                        <td data-bind="text: gameFormatNumber(value)"></td>
                    </tr>
                </tbody>
            </table>
            <table data-bind="if: stats.length > 0" class="critter" style="width: 200px; margin-top: 10px">
                <thead>
                    <tr>
                        <th colspan="3" class="noborder" data-bind="text: name + '状态'"></th>
                    </tr>
                    <tr>
                        <th>名称</th>
                        <th>值</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: stats">
                    <tr>
                        <td data-bind="text: name"></td>
                        <td data-bind="text: value"></td>
                    </tr>
                </tbody>
            </table>
            <table data-bind="if: genes.length > 0" class="critter" style="width: 200px; margin-top: 10px">
                <thead>
                    <tr>
                        <th colspan="3" class="noborder" data-bind="text: name + ' mutations'"></th>
                    </tr>
                    <tr>
                        <th>名称</th>
                        <th>状态</th>
                        <th>值</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: genes">
                    <tr>
                        <td data-bind="text: name, css: { dominate: expression == 2, recessive: expression == 1, flaw: !good}"></td>
                        <td class="tipped" data-bind="text: expression == 1 ? 'Rec.' : 'Exp.', css: { dominate: expression == 2, recessive: expression == 1, flaw: !good, lower: expression == 2 && !good}"></td>
                        <td data-bind="text: good ? ' + ' + value + '%' : ' - ' + value + '%', css: { dominate: expression == 2, recessive: expression == 1, flaw: !good, lower: expression == 2 && !good}"></td>
                    </tr>
                </tbody>
            </table>
            <table data-bind="if: genes.length == 0" class="critter" style="width: 200px;">
                <thead>
                    <tr>
                        <th colspan="3" class="noborder" data-bind="text: 'no ' + name + ' mutations'"></th>
                    </tr>
                </thead>
            </table>
        </div>
    </script>

    <script id="critterRow" type="text/html">
        <tr class="health">
            <td class="health noborder" colspan="8">
                <div data-bind="style: { width: healthPercentage }">&nbsp;</div>
            </td>
        </tr>
        <tr class="critterRow" data-bind="css: { selected: isSelected, alt: $index()%2, newest: $root.newestBorn() === id}">
            <td style="width: 40px;">
                <img class="image" data-bind="visible: isSelected" src="Content/icons/tick.png" />
                <img class="image" data-bind="visible: isLocked" src="Content/icons/lock.png" />
                <img class="image" data-bind="visible: gender === 0" title="Female" src="Content/icons/female.png" />
                <img class="image" data-bind="visible: gender === 1" title="Male" src="Content/icons/male.png" />
            </td>
            <td class="tipped traitcell" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_score\''}">
                <div class="trait" data-bind="text: gameFormatNumber(score), css: { higher: (job === 1 && ((gender === 0 && score> $root.mother().score) || (gender === 1 && score > $root.father().score))) || (job === 5 && ((gender === 0 && score> $root.princess().score) || (gender === 1 && score > $root.prince().score))), lower: (job === 1 && ((gender === 0 && score < $root.mother().score) || (gender === 1 && score < $root.father().score))) || (job === 5 && ((gender === 0 && score < $root.princess().score) || (gender === 1 && score < $root.prince().score))) }"></div>
                <!-- ko template: { name: 'scoreTip', data: $data } -->
                <!-- /ko -->
            </td>
            <!-- ko foreach: traits -->
            <td class="tipped traitcell" data-bind="css: {attackTrait: $root.battleAttackerTrait() == type, defendTrait: $root.battleDefenderTrait() == type}, attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + $parent.id + '_' + name + '\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(base), css: { higher: ($parent.job === 1 && (($parent.gender === 0 && base > $root.mother().traits[$index()].base) || ($parent.gender === 1 && base > $root.father().traits[$index()].base))) || ($parent.job === 5 && (($parent.gender === 0 && base > $root.princess().traits[$index()].base) || ($parent.gender === 1 && base > $root.prince().traits[$index()].base))), lower: ($parent.job === 1 && (($parent.gender === 0 && base < $root.mother().traits[$index()].base) || ($parent.gender === 1 && base < $root.father().traits[$index()].base))) || ($parent.job === 5 && (($parent.gender === 0 && base < $root.princess().traits[$index()].base) || ($parent.gender === 1 && base < $root.prince().traits[$index()].base)))}"></span>
                    <span data-bind="if: bonus != 0">
                        <span data-bind="text: bonus >= 0 ? ' + ' + bonus + '%' : ' - ' + Math.abs(bonus) + '%', css: { higher: ($parent.job === 1 && (($parent.gender === 0 &&  bonus > $root.mother().traits[$index()].bonus) || ($parent.gender === 1 && bonus > $root.father().traits[$index()].bonus))) || ($parent.job === 5 && (($parent.gender === 0 &&  bonus > $root.princess().traits[$index()].bonus) || ($parent.gender === 1 && bonus > $root.prince().traits[$index()].bonus))), lower: ($parent.job === 1 && (($parent.gender === 0 && bonus < $root.mother().traits[$index()].bonus) || ($parent.gender === 1 && bonus < $root.father().traits[$index()].bonus))) ||  ($parent.job === 5 && (($parent.gender === 0 && bonus < $root.princess().traits[$index()].bonus) || ($parent.gender === 1 && bonus < $root.prince().traits[$index()].bonus))) }"></span>
                    </span>
                </div>
                <div style="margin-top: 2px;" class="imageleftandtext" data-bind="visible: ($parent.job !== 4 && value >= 25) || genes.length > 0, css: { higher: ($parent.job === 1 && (($parent.gender === 0 && genes.length > $root.mother().traits[$index()].genes.length) || ($parent.gender === 1 && genes.length > $root.father().traits[$index()].genes.length))) || ($parent.job === 5 && (($parent.gender === 0 && genes.length > $root.princess().traits[$index()].genes.length) || ($parent.gender === 1 && genes.length > $root.prince().traits[$index()].genes.length))), lower: ($parent.job === 1 && (($parent.gender === 0 && genes.length < $root.mother().traits[$index()].genes.length) || ($parent.gender === 1 && genes.length < $root.father().traits[$index()].genes.length))) || ($parent.job === 5 && (($parent.gender === 0 && genes.length < $root.princess().traits[$index()].genes.length) || ($parent.gender === 1 && genes.length < $root.prince().traits[$index()].genes.length))), dim: genes.length == 0 }">
                    <span data-bind="text: genes.length"></span>
                    <span data-bind="text: genes.length == 1 ? ' Mutation' : ' Mutations'"></span>
                    <span data-bind="if: mutation"><img class="image" title="New Mutation" src="Content/icons/new.png" /></span>
                </div>
            </td>
            <!-- ko template: { name: 'traitTip', data: $data } -->
            <!-- /ko -->
            <!-- /ko -->
        </tr>
    </script>

    <script id="workerRow" type="text/html">
        <tr>
            <td class="health noborder" colspan="8">
                <div data-bind="style: { width: healthPercentage }">&nbsp;</div>
            </td>
        </tr>
        <tr class="critterRow" data-bind="css: { selected: isSelected, alt: $index()%2 }">
            <td style="width: 40px;">
                <img class="image" data-bind="visible: isSelected" src="Content/icons/tick.png" />
                <img class="image" data-bind="visible: gender === 0" title="Female" src="Content/icons/female.png" />
                <img class="image" data-bind="visible: gender === 1" title="Male" src="Content/icons/male.png" />
            </td>
            <td class="traitcell trait tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_score\''}">
                <div class="trait" data-bind="text: gameFormatNumber(score)"></div>
            </td>
            <!-- ko template: { name: 'scoreTip', data: $data } -->
            <!-- /ko -->

            <td class="traitcell factory tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_vitality\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(sodPerSecond)"></span>
                    <span class="higher" data-bind="text: '+' + $root.bonusFactoryPercent() + '%', visible: $root.bonusFactoryPercent() > 0"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;">生命</div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[0] } -->
            <!-- /ko -->
            <td class="traitcell carry tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_strength\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(carryPerSecond)"></span>
                    <span class="higher" data-bind="text: '+' + $root.bonusCarrierPercent() + '%', visible: $root.bonusCarrierPercent() > 0"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;">力量</div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[1] } -->
            <!-- /ko -->

            <td class="traitcell tipped mine farm carry factory" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_agility\''}">
                <div class="trait" data-bind="text: actionTimeSeconds + ' sec.'"></div>
                <div class="imageleftandtext" style="margin-top: 2px;">敏捷</div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[2] } -->
            <!-- /ko -->

            <td class="traitcell farm tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_bite\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(grassPerSecond)"></span>
                    <span class="higher" data-bind="text: '+' + $root.bonusFarmPercent() + '%', visible: $root.bonusFarmPercent() > 0"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;">咬</div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[3] } -->
            <!-- /ko -->

            <td class="traitcell mine tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_sting\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(dirtPerSecond)"></span>
                    <span class="higher" data-bind="text: '+' + $root.bonusMinePercent() + '%', visible: $root.bonusMinePercent() > 0"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;">刺</div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[4] } -->
            <!-- /ko -->

        </tr>
    </script>


    <script id="soldierRow" type="text/html">
        <tr class="health" data-bind="css: {defenderHealth: $root.battleDefenderId() === id}">
            <td class="health noborder" colspan="8">
                <div data-bind="style: { width: healthPercentage }">&nbsp;</div>
            </td>
        </tr>
        <tr class="critterRow" data-bind="css: { selected: isSelected, attacker: $root.battleAttackerId() === id, defender: $root.battleDefenderId() === id, dead: (job === 3 || job === 4) && currentHealth() <= 0, alt: $index()%2 }">
            <td style="width: 40px;">
                <img class="image" data-bind="visible: isSelected" src="Content/icons/tick.png" />
                <img class="image" data-bind="visible: gender === 0" title="Female" src="Content/icons/female.png" />
                <img class="image" data-bind="visible: gender === 1" title="Male" src="Content/icons/male.png" />
            </td>
            <td class="tipped traitcell" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_score\''}">
                <div class="trait" data-bind="text: gameFormatNumber(score), css: { higher: (job === 1 && ((gender === 0 && score> $root.mother().score) || (gender === 1 && score > $root.father().score))) || (job === 5 && ((gender === 0 && score> $root.princess().score) || (gender === 1 && score > $root.prince().score))), lower: (job === 1 && ((gender === 0 && score < $root.mother().score) || (gender === 1 && score < $root.father().score))) || (job === 5 && ((gender === 0 && score < $root.princess().score) || (gender === 1 && score < $root.prince().score))) }"></div>
                <div class="imageleftandtext" style="margin-top: 3px" data-bind="text: 'Lvl ' + level() + ' ' + rank(), visible: job === 3"></div>
                <!-- ko template: { name: 'scoreTip', data: $data } -->
                <!-- /ko -->
            </td>

            <td class="traitcell tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_vitality\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(Math.floor(currentHealth()))"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;">生命</div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[0] } -->
            <!-- /ko -->
            <td class="traitcell tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_strength\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(traits[1].trueValue)"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;" data-bind="visible: job === 3, text: '+' + $root.armyUpgrades().strengthBonus() + '% artifacts', css: {higher: $root.armyUpgrades().strengthBonus() > 0 }"></div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[1] } -->
            <!-- /ko -->

            <td class="traitcell tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_agility\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(traits[2].trueValue)"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;" data-bind="visible: job === 3, text: '+' + $root.armyUpgrades().agilityBonus() + '% artifacts', css: {higher: $root.armyUpgrades().agilityBonus() > 0 }"></div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[2] } -->
            <!-- /ko -->

            <td class="traitcell tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_bite\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(traits[3].trueValue)"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;" data-bind="visible: job === 3, text: '+' + $root.armyUpgrades().biteBonus() + '% artifacts', css: {higher: $root.armyUpgrades().biteBonus() > 0 }"></div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[3] } -->
            <!-- /ko -->

            <td class="traitcell tipped" data-bind="attr: { 'data-tipped-options': 'inline: ' + '\'critter_tip_' + id + '_sting\''}">
                <div class="trait">
                    <span data-bind="text: gameFormatNumber(traits[4].trueValue)"></span>
                </div>
                <div class="imageleftandtext" style="margin-top: 2px;" data-bind="visible: job === 3, text: '+' + $root.armyUpgrades().stingBonus() + '% artifacts', css: {higher: $root.armyUpgrades().stingBonus() > 0 }"></div>
            </td>
            <!-- ko template: { name: 'traitTip', data: traits[4] } -->
            <!-- /ko -->

        </tr>
    </script>

    <div id="export" class="modal" style="display: none;">
        <button style="float: right" class="simplemodal-close">关闭</button>
        <h4>导出进度</h4>
        <textarea id="txtExport" rows="10" cols="75"></textarea>
    </div>
    <div id="import" class="modal" style="display: none;">
        <div style="float: right">
            <button class="simplemodal-close">取消</button>
            <button onclick="Import()" class="simplemodal-close">导入</button>
        </div>

        <h4>导入进度</h4>
        <textarea id="txtImport" rows="10" cols="75"></textarea>
    </div>
    <script src="Scripts/game.scramble.js"></script>
    <!--<script src="Scripts/Game.js"></script>-->
    <script src="Scripts/Site.js"></script>
</body>

</html>

